<template>
	<view class="topic-center-box">
		<view class="topic-nav">
			<image :src="$imgUrl + '/personal/back-icon.png'" class="image" @click="back" mode=""></image>
			<view class="view">我的话题中心</view>
			<image :src="$imgUrl + '/personal/back-icon.png'" class="image" style="visibility: hidden;" mode=""></image>
		</view>
		<view class="topic-center-info">
			<image :src="$imgUrl + '/services/person-icon.png'" class="center-photo" mode=""></image>
			<view class="topic-center-vip">
				<view class="view-1">{{userName}}</view>
			</view>
		</view>
		<view class="topic-center-list">
			<view class="uni-topic-list">
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="topic-list" v-for="(item, index) in list" :key="item.id">
					<view class="topic-tag">#{{item.topicName}}#</view>
					<view class="topic-list-p">
						<image :src="$imgUrl + '/services/person-icon.png'" class="topic-list-person" mode=""></image>
						<view class="view">
							<span class="list-f-1">{{item.userName}}</span>
							<span class="list-f-2">{{$filters.formatTimeAgo(item.createTime)}}</span>
						</view>
					</view>
					<view class="topic-list-desc">
						{{item.content}}
					</view>
					<view class="topic-list-img1" v-if="item.images.length < 4">
						<image :src="$filters.oosImgZip(img)" class="image" @click="previewImage(img)" v-for="(img, idx) in item.images" :key="'img'+idx" mode=""></image>
					</view>
					<view class="topic-list-img2" v-if="item.images.length > 3&&item.images.length < 6">
						<image :src="$filters.oosImgZip(img)" class="image" @click="previewImage(img)" v-for="(img, idx) in item.images" :key="'img'+idx" mode=""></image>
					</view>
					<view class="topic-list-img3" v-if="item.images.length > 6">
						<image :src="$filters.oosImgZip(img)" class="image" @click="previewImage(img)" v-for="(img, idx) in item.images" :key="'img'+idx" mode=""></image>
					</view>
					<view class="topic-detail">
						<view class="view">{{$filters.formatDate(item.createTime)}}</view>
						<view class="topic-zan view" v-if="item.flag"  @click.native.stop="getTopicUpvote(item)">
							<image class="image" :src="$imgUrl + '/personal/zan-icon.png'" mode=""></image>{{item.thumbs}}
						</view>
						<view class="topic-zan yellow view" v-else>
							<image class="image" :src="$imgUrl + '/personal/zan-yellow-icon.png'" mode=""></image>{{item.thumbs}}
						</view>
					</view>
				</view>
			</mescroll-body>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {reactive,ref} from 'vue'
	import { topicsGetPage,topicsUpvote } from '@/common/API/member'
	import { onLoad } from "@dcloudio/uni-app"
	import { onPageScroll, onReachBottom } from "@dcloudio/uni-app"
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom)
	
	const info = reactive({
		phone: null,
		authenticated: null,
		avatar: null,
		vip: true
	})
	// 跟帖列表
	const list = ref<any>([])
	const upCallback = async (mescroll)=>{
		let data = {
			userId: userId.value,
			pageNo: mescroll.num,
			pageSize: mescroll.size
		}
		let res = await topicsGetPage(data)
		if(res.list&&res.list.length){
			res.list.map(item=>{
				item.images = item.images?item.images.split(','):[]
			})
		}
		let curPageData = res.list || [];
		let curPageLen = curPageData.length;
		if(mescroll.num == 1) list.value = [];
		list.value = list.value.concat(curPageData);
		mescroll.endSuccess(curPageLen);
	}
	const back = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	const userId = ref()
	const userName = ref()
	onLoad((options)=>{
		userId.value = options.userId
		userName.value = options.userName
	})
	//预览
	const previewImage = (url) => {
		console.log(url)
		let arr = []
		arr[0] = url
		uni.previewImage({
			urls: arr,
			current:0
		})
	}
	//点赞
	const getTopicUpvote = async (item) => {
		if(!item.flag || item.topicStatus!=2){
			return
		}
		let userId = uni.getStorageSync('userId')
		let data = {
			userId: userId,
			topicPostId: item.id
		}
		let res = await topicsUpvote(data)
		if(res){
			item.flag = !item.flag
			item.thumbs ++
			console.log(res)
		}
	}
</script>
<style>
page{
	height: 100%;
	background: linear-gradient(180deg, rgba(254, 145, 105, 0.2) 0%, rgba(255, 88, 107, 0) 100%) no-repeat;
	background-size: 750rpx 460rpx;
}
</style>
<style lang="scss" scoped>
.topic-center-box{
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	padding-bottom: 40rpx;
}
.topic-nav{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
	height: var(–status-bar-height);
	padding-top: 50px;
	.image{
		width: 17rpx;
		height: 31rpx;
		padding: 0 32rpx;
	}
	.view{
		flex: 1;
		text-align: center;
		font-size: 34rpx;
	}
}
.topic-center-info{
	border-radius: 32rpx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 10rpx 30rpx  rgba(245, 241, 233, 0.5);
	margin: 48rpx 32rpx;
	padding: 32rpx;
	display: flex;
	.center-photo{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.topic-center-vip{
		flex: 1;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		.view-1{
			font-size: 36rpx;
		}
		.topic-c-v{
			background: rgba(255, 226, 189, 0.8);
			width: 144rpx;
			height: 44rpx;
			display: inline-block;
			border-radius: 46rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 10rpx;
			.span{
				color:rgba(242, 169, 34, 1) ;
				font-size: 24rpx;
				margin-left: 6rpx;
			}
		}
		.image{
			width: 24rpx;
			height: 24rpx;
		}
	}
}
.topic-center-list{
	border-radius: 32rpx 32rpx 0 0;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px -4rpx 12rpx  rgba(0, 0, 0, 0.08);
	flex: 1;
	overflow-y: auto;
	.topic-tag{
		background: rgba(253, 150, 24, 1);
		padding: 0 16rpx;
		color: #fff;
		display: inline-block;
		border-radius: 4rpx;
		margin-bottom: 24rpx;
		font-size: 24rpx;
	}
	.topic-list{
		padding: 32rpx 44rpx 32rpx 44rpx;
		.topic-list-p{
			display: flex;
			align-items: center;
			.view{
				display: flex;
				flex-direction: column;
			}
			.list-f-1{
				font-size: 28rpx;
				color: rgba(0, 0, 0, 1);
			}
			.list-f-2{
				font-size: 24rpx;
				color: rgba(153, 153, 153, 1);
			}
		}
		.topic-list-desc{
			color: rgba(0, 0, 0, 1);
			font-size: 32rpx;
			padding: 30rpx 0;
			width: 600rpx;
			overflow: hidden;
			white-space: normal;
			word-wrap: break-word;
		}
		.topic-list-person{
			width: 76rpx;
			height: 76rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 32rpx;
		}
		.topic-list-img1{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 1fr;
			grid-gap: 20rpx 10rpx;
			.image{
				width: 208rpx;
				height: 208rpx;
			}
		}
		.topic-list-img2{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr;
			grid-gap: 20rpx 10rpx;
			.image{
				width: 208rpx;
				height: 208rpx;
			}
		}
		.topic-list-img3{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr;
			grid-gap: 20rpx 10rpx;
			.image{
				width: 208rpx;
				height: 208rpx;
			}
		}
	}
}
.topic-detail{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 18rpx;
	.view{
		color: rgba(153, 153, 153, 1);
	}
	.topic-zan{
		display: flex;
		align-items: center;
	}
	.image{
		width: 32rpx;
		height: 32rpx;
		margin-right: 6rpx;
	}
}
</style>